<!-- map -->
<template>
  <div class="mapContain">
    <div id="container"></div>
    <div id="myPageTop">
      <label>请输入关键字：</label>
      <input id="tipinput" v-model="input" value="" />
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      lng: "",
      lat: "",
      province: "",
      city: "",
      street: "",
      input:""
    };
  },
  mounted() {
    let that = this;
    let map;
    AMapLoader.load({
      // center:[x,y],
      key: "113154efc13cf9359d53bb60d6787b12", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: "1.1", // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
      viewMode: "3D", // 地图模式
    })
      .then((AMap) => {
        map = new AMap.Map("container");
        //输入提示
        var autoOptions = {
          input: "tipinput",
        };
        
        AMap.plugin(["AMap.AutoComplete"], function () {
            var autoComplete = new AMap.Autocomplete(autoOptions);
            autoComplete.on("select",(e)=>{
              map.setCenter([e.poi.location.lng, e.poi.location.lat]);
              map.setZoom('15');
            })
            
        });
        
        // 获取地理位置
        let geocoder;
        function getPositionByLonLats(lng, lat) {
          return new Promise((resolve, reject) => {
            var lnglatXY = [lng, lat]; // 地图上所标点的坐标
            var that = this;
            AMap.plugin("AMap.Geocoder", () => {
              // 回调函数
              geocoder = new AMap.Geocoder({});
              geocoder.getAddress(lnglatXY, (status, result) => {
                if (status === "complete" && result.info === "OK") {
                  let address = {
                    province: result.regeocode.addressComponent.province,
                    //死亡判断
                    city:
                      result.regeocode.addressComponent.city === ""
                        ? result.regeocode.addressComponent.district === ""
                          ? result.regeocode.addressComponent.street === ""
                            ? result.regeocode.addressComponent.township
                            : result.regeocode.addressComponent.street
                          : result.regeocode.addressComponent.district
                        : result.regeocode.addressComponent.city,
                  };
                  if (
                    result.regeocode.addressComponent.district !== address.city
                  ) {
                    address.street =
                      result.regeocode.addressComponent.district +
                      result.regeocode.addressComponent.street +
                      result.regeocode.addressComponent.township;
                  } else if (
                    result.regeocode.addressComponent.street !== address.city
                  ) {
                    address.street =
                      result.regeocode.addressComponent.street +
                      result.regeocode.addressComponent.township;
                  } else if (
                    result.regeocode.addressComponent.township !== address.city
                  ) {
                    address.street = result.regeocode.addressComponent.township;
                  } else {
                    address.street = "";
                  }
                  if (/市$/.test(address.province)) {
                    address.street = address.city + address.street;
                    address.city = address.province;
                    address.province = "";
                  }
                  resolve(address);
                } else {
                  that.$message.warning("获取地理位置失败，请重试");
                  reject("获取地理位置失败，请重试");
                }
              });
            });
          });
        }
        //地图标点
        var array = [];
        map.on("click", (e) => {
          //标点
          this.lng = e.lnglat.lng;
          this.lat = e.lnglat.lat;
          let that = this;
          getPositionByLonLats(e.lnglat.lng, e.lnglat.lat).then((data) => {
            this.province = data.province;
            this.city = data.city;
            this.street = data.street;
            this.$emit("mapData", {
              lng: this.lng,
              lat: this.lat,
              province: this.province,
              city: this.city,
              street: this.street,
            });
            var marker = new AMap.Marker({
              position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
              label: {
                direction: "top",
                content: this.province + this.city + this.street,
              },
            });
            array.push(marker);
            if (array.length > 1) {
              //添加最后一个 删除第一个
              map.add(array[array.length - 1]);
              map.remove(array.shift());
            } else {
              map.add(marker);
            }
          });
        });

        // 将创建的点标记添加到已有的地图实例：
      })
      .catch((e) => {
        console.log(e);
      });
  },
};
</script>

<style lang='scss' scoped>
.mapContain {
  position: relative;
  #container {
    width: 670px;
    height: 300px;
  }
  #myPageTop {
    position: absolute;
    top: 0px;
    right: 10px;
    #tipinput {
      outline: none;
      border: 1px solid #dcdfe6;
      &:focus {
        border: 1px solid rgb(86, 165, 255);
      }
    }
    // #tipinput:focus {
    //   background: slateblue;
    // }
  }
}
</style>